<template>
  <div class="whole">
    <div class="login">
      <div class="header">
        <h2>小型规模化猪场管理系统</h2>
      </div>
      <div class="content">
        <div class="input">
          <el-input
            v-model="state.username"
            placeholder="请输入账号"
          ></el-input>
        </div>
        <div class="input">
          <el-input
            v-model="state.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </div>
        <div class="input">
          <el-input
            v-model="state.email"
            placeholder="请输入用户邮箱"
          ></el-input>
        </div>
        <div class="input">
          <el-input
            v-model="state.phoneNumber"
            placeholder="请输入手机号"
          ></el-input>
        </div>
        <div class="input">
          <el-input
            v-model="state.encryptedProblem"
            placeholder="请输入密保问题"
          ></el-input>
        </div>
        <div class="input">
          <el-input
            v-model="state.encryptedAnswer"
            placeholder="请输入密保答案"
          ></el-input>
        </div>
        <div class="btn">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="primary" @click="toLogin">去登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// export default {
//   name: "Register"
// }
import { reactive } from "vue";
import { createAPI } from "@/utils/request";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const register = () => {
  const patternUserName = /^[\w\u4e00-\u9fa5]{1,6}$/;
  const patternPassword = /^[\w]{6,12}$/;
  const patternEmail =
    /^([a-zA-Z]|[0-9])(\w|\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  if (
    state.username === "" ||
    state.password === "" ||
    state.phoneNumber === "" ||
    state.email === "" ||
    state.encryptedProblem === "" ||
    state.encryptedAnswer === ""
  ) {
    ElMessage({
      message: "您输入的用户名和密码,手机号或者邮箱为空，请重新输入",
      type: "error",
      duration: 5 * 1000,
    });
    return null;
  } else if (
    !patternUserName.test(state.username) ||
    !patternPassword.test(state.password) ||
    !patternEmail.test(state.email)
  ) {
    ElMessage({
      message:
        "请输入1-6位的英文、数字、中文、下划线的用户名，请输入6-12位的英文、数字、下划线的密码，请输入正确的邮箱地址",
      type: "error",
      duration: 5 * 1000,
    });
    return null;
  } else {
    const formData = new FormData();
    formData.append("userName", state.username);
    formData.append("password", state.password);
    formData.append("email", state.email);
    formData.append("phoneNumber", state.phoneNumber);
    formData.append("encryptedProblem", state.encryptedProblem);
    formData.append("encryptedAnswer", state.encryptedAnswer);
    createAPI("register", "post", formData).then((res)=>{
      if (res.data.status === 200) {
        console.log(res.data.obj)

        ElMessage({
          type: 'success',
          message: '注册成功',
        })
        setTimeout(()=>{
          router.push("/")
        },6000)
      }
    })
  }
};
const toLogin = () => {
  router.push("/");
};
const state = reactive({
  username: "",
  password: "",
  email: "",
  phoneNumber: "",
  encryptedProblem: "",
  encryptedAnswer: "",
});
</script>

<style scoped>
.input {
  width: 450px;
}
* {
  margin: 0;
}
.whole {
  width: 100%;
  height: 100vh;
  background-image: url(./imgs/login-bg.jpg);
  background-size: 100%;
}
.login {
  position: absolute;
  left: 39%;
  top: 20%;
  width: 25%;
  height: 480px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.header h2 {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #bbb;
  border-bottom: 1px solid #ddd;
}
.content {
  width: 100%;
}
.content .input {
  margin: 20px;
}

.btn {
  width: 100%;
  margin-top: 40px;
  text-align: center;
}
.el-button + .el-button {
  margin-left: 50px;
}
</style>
